<template>
	<div class="course" @click="emit('switchCourse')">
		<p>{{ name.toUpperCase() }}</p>
		<small>Уроков: {{ lessons }}</small>
	</div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const emit = defineEmits(['switchCourse'])

const props = defineProps({
	name: String,
	lessons: Number
})

console.log(props);
</script>

<style lang="scss" scoped>
.course {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 23%;
	margin:15px;
	height: 300px;
	border: 4px solid #000000;
	border-radius: 4px;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
	cursor: pointer;
	transition: all .35s ease;

	p {
		font-size: 44px;
		font-weight: 900;
		margin-bottom: 10px;
	}

	small {
		font-size: 16px;
	}

	&:hover {
		transform: scale(1.1);
	}
}
</style>